{% extends 'base/base.html' %}

{% load static %}


{% block title %}
<title>书籍列表</title>
{% endblock %}


{% block body %}

<style>
.list-group {
  display: flex;           /* 使用Flexbox布局 */
  flex-wrap: wrap;         /* 允许列表项换行 */
  list-style: none;        /* 移除默认的列表样式 */
  padding: 0;              /* 移除默认的内边距 */
  margin: 0;               /* 移除默认的外边距 */
}

.list-group-item {
  flex: 0 0 25%;           /* 每个列表项占25%的宽度 */
  max-width: 25%;          /* 限制最大宽度为25% */
  box-sizing: border-box;  /* 包括padding和border在内的总宽度和高度 */
  text-align: center;      /* 选项：让内容居中 */
}

/* 以下是可选的，用于确保图片响应式显示 */
.img-responsive {
  width: 100%;
  height: 400px; /* 设置你想要的大小 */
   object-fit: cover; /* 保持图片的宽高比，同时填充整个区域 */
<!--  height: auto;-->
}
/* 分页样式 */
.pagination {
  display: flex;
  justify-content: center; /* 水平居中 */
  padding: 20px 0; /* 分页链接上下添加一些内边距 */
}

.pagination .step-links a,
.pagination .step-links .current {
  margin: 0 5px; /* 分页链接之间的间距 */
  text-decoration: none; /* 移除下划线 */
  color: #333; /* 链接颜色 */
}

.pagination .step-links a:hover {
  color: #007bff; /* 鼠标悬停时的颜色 */
}


</style>

<ul class="list-group">
  {% for book in books %}
      <li class="list-group-item">
          <a href="{% url 'main:detail' book.id %}">
              <img src="/media/{{ book.thumb_image }}" class="img-responsive" alt="Responsive image">
          </a>
          <h4>{{ book }}</h4>
      </li>
    {% endfor %}

</ul>


<!-- 分页链接 -->
<div class="pagination">
  <span class="step-links">
    {% if books.has_previous %}
      <a href="?page=1">&laquo; 首页</a>
      <a href="?page={{ books.previous_page_number }}">上一页</a>
    {% endif %}

<!--    <span class="current">-->
<!--      Page {{ books.number }} of {{ books.paginator.num_pages }}.-->
<!--    </span>-->

    {% if books.has_next %}
      <a href="?page={{ books.next_page_number }}">下一页</a>
      <a href="?page={{ books.paginator.num_pages }}">尾页 &raquo;</a>
    {% endif %}
  </span>
</div>
{% endblock %}